<template>
   <div style=" margin-top:30px">
		 <div class="head"> 

				  <el-button type="primary" size="mini"><router-link to="/admin/CatlogAdd" style="text-decoration: none; color:black;"><i class="el-icon-edit-outline">新增</i></router-link></el-button>
		搜索：<el-autocomplete v-model="searchValue"  placeholder="请输入内容" ></el-autocomplete> <el-button icon="el-icon-search" @click="searchbook()"></el-button>
</div>
<center>

<div class="deit">
    <div class="crumbs">
      <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-date"></i> 书籍管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类列表</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="cantainer">

<el-table :data="CatlogList.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" >
	<el-table-column label="全选" width="100">
			<el-checkbox ></el-checkbox>
		</el-table-column>
      <el-table-column prop="id" label="书籍分类ID" width="180" align="center" >
      </el-table-column>
      <el-table-column prop="catelogCode" label="书籍分类编号" width="180"  align="center">
      </el-table-column>
      <el-table-column prop="catelogName" label="分类名"  align="center">
      </el-table-column>
			<el-table-column prop="id" label="操作" align="center">
				  <template slot-scope="scops">
						<el-button type="primary" size="mini" icon="el-icon-edit" @click="UpdateCatlog(scops.row.id)">编辑</el-button>
						 <el-button type="primary" size="mini" icon="el-icon-delete" @click="DeleteCatlog(scops.row.id,scops.row.catelogName)">删除</el-button>
					</template>
      </el-table-column>
    </el-table>

 <!-- 分页 -->
									  <el-pagination style="margin-top:50px ;"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[5, 8]" 
                            :page-size="pagesize"        
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="CatlogList.length">    
                    </el-pagination>
        </div>
    </div>
  </div>


		
<!-- 	   此代码与上面代码一致，只是进行美化
		<table border="1" cellspacing="0" width="1200px">
	      <thead>
	        <tr>
  								<th>书籍分类ID</th>
  								<th>书籍分类编号</th>
  								<th>分类名</th>
         					<th>操作</th>
	          </tr>
	        </thead>
	        <tbody>
	            <tr v-for="item in CatlogList" :key="item.id">
	              <td >{{item.id}}</td>
							
								<td >{{item.catelogCode}}</td>
                <td >{{item.catelogName}}</td>
                <td ><i class="el-icon-delete" @click="DeleteCatlog(item.id)"></i><i class="el-icon-edit" @click="UpdateCatlog(item.id)"></i></td>
	            
              </tr>
	   			
	        </tbody>
	    </table>  -->
			</center>
	</div>
</template>

<script>
export default {
  name:"mangeProductCatlog",
  	data(){
		return{

			searchValue:'',
		search:'',
		CatlogList:[{
      id:'',
      proId:'',
      catelogCode:'',
      catelogName:'',

			admin:''
			}],
			 currentPage:1, //初始页
       pagesize:8,    //    每页的数据
        

		}

	},mounted:function(){
	
		this.getcatlogs()
	},created() {
        this.handleUserList()
    }
	,methods:{
		//用于获取分类的数据用于显示
		getcatlogs:function(){
			this.$axios.get("/catlog/getcatlogs").then(
				res=>{
						this.CatlogList=res.data;
						console.log(this.CatlogList);
				}
			)
		},
		//删除分类记录
		DeleteCatlog:function(DeleteId,catelogName){
			var admin=localStorage.getItem("admin")
		
		
			this.$axios.get("/catlog/deleteCatlogs",{params:{id:DeleteId,catelogName:catelogName,admin:admin}}).then(res=>{
				
				this.getcatlogs()
				if(res.data!=0){
					alert("删除成功")
				}else{
					alert("删除失败")
				}
			})
		},
		//修改分类记录
		UpdateCatlog:function(updateId){
		
			this.$router.push({
				name:'catlogUpdate',
				params:{updateId}
			})
		},
		searchbook:function(){
		this.$axios.get("/product/searchbook",{params:{search:this.searchValue}}).then(res=>{
			console.log(res)
			this.UserList=res.data
		})
	},
		
	//分页功能
	handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
        },
        handleUserList() {
            this.$axios.get('http://localhost:8080/BMS/catlog/getcatlogs').then(res => {  //这是从本地请求的数据接口，
                this.CatlogList = res.body
            })
        }
	},

}
</script>

<style>

 .head{
	position: relative;
	top:-40px;
	text-align: left;

} 
</style>